//? 发送请求

//? data 是console.log(res);里的
//? console.log(res);  =    { data: {… }, status: 200, statusText: 'OK', headers: {… }, config: {… }, … } 里的

// const { count } = require("console")

//! 全局设置axios拦截器
axios.interceptors.request.use(
    (config) => {//@ 这个回调函数 在每次发请求到服务器端之前 都会调用执行
        //@ 设置请求头参数
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

//! axios全局设置响应拦截器
axios.interceptors.response.use(
    (res) => {//@ 这个回调函数，在每次请求从服务器返回浏览器之前都会调用执行
        return res
    },
    (error) => {//@ 每次请求发生错误 都会调用执行
        if (error.response.status == 401) {
            alert('登录过期，需要重新登录')
            localStorage.removeItem('token')
            location.href = './login.html'
        } else if (error.response.status == 404) {
            alert('访问路径有误')
        } else if (error.response.status ==500) {
            alert('服务器内部错误')
        }
        return Promise.reject(error)
    }
)



//! 获取搜索按钮 和 输入框
var searchBtn = document.querySelector('.searchbox .search')

var intEle = document.querySelector('.searchbox input')

//!获取localStorage存储的用户信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'))
console.log(userinfo);
//! 渲染用户信息首页
document.querySelector('.username').innerHTML = userinfo.name



//! 点击搜索按钮，发起ajax请求。传参给服务器端，服务器端返回搜索结果
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: intEle.value } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
}

//! 给table-body绑定点击事件（事件委托）
var tabEle = document.querySelector('.table-body')
tabEle.onclick = function (e) {
    //! e.target.tagName == 'SPAN' 判断是不是span标签
    //! e.target.classList.contains('icon-shanchu') 判断是不是包含icon-shanchu 这个类名
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        console.log('点击了删除按钮');
        //? 先获取这个删除按钮对应的手机号
        //? 发起了删除请求 ，删除服务器的这个用户
        console.log(e.target.dataset.phone);
        axios.post('/user/delete', {phone:e.target.dataset.phone}).then((res) => {
            console.log(res.data);
            //@ 如果想要在删除成功之后，同时让页面也看到删除后的效果
            //# 方案一 本地删除dom节点
            //e.target.parentNode.parentNode.remove()
            //# 方案二 让删除接口 返回删除后的新数据，本地调用render方法重新渲染
            render(res.data.list)
        })
    }
} 

//! 渲染列表
function render(data) {
    var str = ''
    str = data.map((item, index) => {
        return `<ul class="row">
        <li>${item.email}</li>
        <li>${item.name}</li>
        <li>${item.phone}</li>
        <li>${item.ingroup}</li>
        <li>${item.inadmin ? '是' : '否'}</li>
        <li class ='${item.status ? '' : 'error'}'>${item.status ? '正常' : '异常'}</li>
        <li>
            <span class="iconfont icon-bianji editicon" id="101"></span>
            <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
        </li>
    </ul>
        `
    }).join('')

    //* 如果没有数据
    if (str == '') {
        str = `<ul style="text-align:center;color:red">未查询到数据</ul>`
    }
    document.querySelector('.table .table-body').innerHTML = str
}

//! axios是从axios.min.js文件中暴露的用来发送ajax请求的一个对象
var page = 1
//@ get请求携带参数的方式 ,{params：{}}
axios.get('/user/list', { params: { page: page, count: 10 },header:{} }).then((res) => {
    //! 调用render方法，传入后端返回的数据，渲染列表
    render(res.data.list)
    // console.log(res);
    console.log(res.data);
})

//$ 自己补充
var next = document.querySelector('.next')
next.onclick = function () {
    console.log(next);
    if (page < 2) {
        axios.get('/user/list', { params: { page: ++page, count: 10 } }).then((res) => {
            //! 调用render方法，传入后端返回的数据，渲染列表
            render(res.data.list)
            // console.log(res);
            console.log(res.data);
        })
    } else {
        page == 2
    }
}

var prev = document.querySelector('.prev')
prev.onclick = function () {
    if (page > 1) {
        axios.get('/user/list', { params: { page: --page, count: 10 } }).then((res) => {
            //! 调用render方法，传入后端返回的数据，渲染列表
            render(res.data.list)
            // console.log(res);
            console.log(res.data);
        })
    } else {
        page == 1
    }

}


//@ post携带请求的方式 ,{}
axios.post('/user/login', { phone: '15291695373', pass: '1234' }).then((res) => {
    console.log(res.data);

})
// axios.put()
// axios.delete() 